<template>
  <div id="Reatings">
    <div class="score">
      <div class="score-left">
        <div class="fraction">4.5</div>
        <p>综合评分</p>
        <div class="than">高于周边商家69.2%</div>
      </div>
      <div class="score-right">
        <p>
          服务态度:<van-rate
            v-model="value"
            :size="18"
            :allow-half="true"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          /><span class="rcol">{{ value }}</span>
        </p>
        <p>
          服务态度:<van-rate
            v-model="value"
            :size="18"
            :allow-half="true"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          /><span class="rcol">{{ value }}</span>
        </p>
        <p>送达时间: <i>44分钟</i></p>
      </div>
    </div>
    <div class="unll"></div>

    <van-tabs v-model="activeName">
      <van-tab title="全部" name="all">
        <div class="reatings">
          <van-radio-group v-model="radio">
            <van-radio name="1">只看有内容的评价</van-radio>
          </van-radio-group>
        </div>
        <div v-for="item in all" :key="item.rateTime" class="gmlp">
          <img :src="item.avatar" alt="" class="imgs" />
          <div class="right">
            <div class="usertime">
              <p>{{ item.username }}</p>
              <p>{{ item.rateTime | normalizeYmd }}</p>
            </div>
            <div>
              <van-rate
                v-model="item.score"
                :size="10"
                :allow-half="true"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />&emsp;
              <span class="times">{{ item.deliveryTime }}分钟</span>
            </div>
            <p>{{ item.text }}</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="满意" name="satis">
        <div class="reatings">
          <van-radio-group v-model="radio">
            <van-radio name="1">只看有内容的评价</van-radio>
          </van-radio-group>
        </div>
        <div v-for="item in satis" :key="item.rateTime" class="gmlp">
          <img :src="item.avatar" alt="" class="imgs" />
          <div class="right">
            <div class="usertime">
              <p>{{ item.username }}</p>
              <p>{{ item.rateTime | normalizeYmd }}</p>
            </div>
            <div>
              <van-rate
                v-model="item.score"
                :size="10"
                :allow-half="true"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />&emsp;
              <span class="times">{{ item.deliveryTime }}分钟</span>
            </div>
            <p>{{ item.text }}</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="不满意" name="unsatis">
        <div class="reatings">
          <van-radio-group v-model="radio">
            <van-radio name="1">只看有内容的评价</van-radio>
          </van-radio-group>
        </div>
        <div v-for="item in unsatis" :key="item.rateTime" class="gmlp">
          <img :src="item.avatar" alt="" class="imgs" />
          <div class="right">
            <div class="usertime">
              <p>{{ item.username }}</p>
              <p>{{ item.rateTime | normalizeYmd }}</p>
            </div>
            <div>
              <van-rate
                v-model="item.score"
                :size="10"
                :allow-half="true"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />&emsp;
              <span class="times">{{ item.deliveryTime }}分钟</span>
            </div>
            <p>{{ item.text }}</p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getRatingList } from '../../api'
export default {
  data () {
    return {
      ratingList: [],
      activeName: 'all',
      value: 4.5,
      radio: '1'
    }
  },
  computed: {
    all () {
      return this.ratingList
    },
    satis () {
      return this.ratingList.filter(v => v.rateType == 0)
    },
    unsatis () {
      return this.ratingList.filter(v => v.rateType == 1)
    }
  },

  created () {
    console.log('this.ratingList :>> ', this.ratingList);
    this.fetchRatingList();
  },
  methods: {
    async fetchRatingList () {
      const res = await getRatingList()
      console.log('res4565 :>> ', res);
      this.ratingList = res.data
      console.log('this.ratingList :>> ', this.ratingList);
    }
  },
}
</script>

<style lang="less" scoped>
#Reatings {
  .score {
    padding: 15px;
    display: flex;
    .score-left {
      padding-right: 15px;
      text-align: center;
      line-height: 30px;
      border-right: 1px solid #ccc;
      .fraction {
        font-size: 24px;
        color: #f3b446;
        font-weight: 500;
      }
      p {
        font-weight: 700;
      }
      .than {
        color: #ccc;
      }
    }
    .score-right {
      line-height: 30px;
      font-weight: 700;
      padding-left: 15px;
    }
  }
  .unll {
    width: 100%;
    height: 25px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f2f6f9;
  }
  .reatings {
    margin: 20px 0;
    padding: 10px;
    height: 50px;
    display: flex;
    align-items: center;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .gmlp {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    line-height: 24px;
    .imgs {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    .right {
      width: 340px;
      .usertime {
        display: flex;
        justify-content: space-between;
      }
      .times {
        font-size: 14px;
        color: #ccc;
      }
    }
  }
  /deep/.van-tab:first-child {
    background-color: #1989f9;
    color: white;
    font-size: 16px;
  }
  /deep/.van-tab:nth-child(2) {
    background-color: #cdedf8;
    color: white;
    font-size: 16px;
  }
  /deep/.van-tab:nth-child(3) {
    background-color: #e8ecef;
    color: white;
    font-size: 16px;
  }
  /deep/.van-radio__icon--checked .van-icon {
    background-color: #ccc;
    border-color: #ccc;
  }
}
</style>